<template>
    <div class="dis-top-bar " >
        <h1 :style="{color:color1}">{{title}}</h1>
        <router-link :to="url">
        <span v-show="!isShow" :style="{color:color2}" class="yo-ico" @click="clickSearch">🔍</span>
        <h2 v-show="isShow" :style="{color:color2}">{{action}}</h2>
        </router-link>
    </div>
</template>

<script>
    export default {
        props:['title','action','color1','color2','url','isShow'],
        name: "DisTopBar",
        methods:{
            clickSearch(){
                this.$router.push("/search/index")
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .dis-top-bar
        display flex 
        height .7rem
        align-items flex-end
        padding  0 .1rem .1rem .1rem
        justify-content space-between
        h1
            font-size .25rem
        a           
            h2
                font-size .18rem
            span                
                font-size .2rem
                font-size .26rem
</style>